<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		 <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 
			<meta http-equiv="X-UA-Compatible" content="ie=edge">vscode创建html文件默认有这串代码，原来这个的意思是：
			
			Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
		 -->
		 
		 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>
			清除浮动：因为float不占空间，有时候影响后面的布局
		</title>
		
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				border: 10px solid yellow;
			}
			/* 清除浮动 */
			/* .box::after{
				content: "";
				display: block;
				clear:both;
			} */
			
			/* 	没有after ，下面的 part 会显示在 item 背面*/
			.item{
				width: 100px;
				height: 100px;
				background-color: blue;
				margin-right: 10px;
				float: left;
			}
			.part{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<div class="part"></div>
	</body>
</html>